<template>
  <el-container ref="bigModel" class="main-model">
    <!-- 网络用户抗身份识别比较 -->
    <el-header>
      <div class="home-top-model">
        <Header :active-title="5" />
      </div>
    </el-header>
    <el-main>
      <div>
        <div class="home-model">
          <el-row style="background-color: #113366">
            <el-col :span="leftModelSpan">
              <div class="home-model-left">
                <div style="height: 50%; border-bottom: 3px solid black">
                  <Graph
                    style="z-index: 1000"
                    :graphData="graphDataAfter"
                    :tasktype="tasktype"
                    :title="'抗识别后'"
                  />
                  <!-- <Cloud style="z-index: 1000;" v-else :graphData="cloudDataAfter" :tasktype=tasktype :title="'抗识别后'" /> -->
                </div>
                <div style="height: 50%">
                  <Graph
                    style="z-index: 1000"
                    :graphData="graphDataBefore"
                    :tasktype="tasktype"
                    :title="'抗识别前'"
                  />
                  <!-- <Cloud style="z-index: 1000;" v-else :graphData="cloudDataBefore" :tasktype=tasktype
                      :title="'抗识别前'" /> -->
                </div>
                <img
                  v-if="rightModelShow"
                  :src="require('@/assets/xd/new/Group 1142813242.png')"
                  alt=""
                  class="rightJ"
                  style=""
                  @click="hideRightModel"
                />
                <img
                  v-else
                  :src="require('@/assets/xd/new/Group 1142813263.png')"
                  alt=""
                  class="rightJ"
                  style=""
                  @click="showRightModel"
                />
              </div>
            </el-col>
            <el-col :span="rightModelSpan">
              <div class="home-model-right">
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    用户信息泄露告警
                    <!-- 跳转按钮到后台身份识别 -->
                    <el-button
                      type="text"
                      @click="toalarmInformation"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <list-scroll class="box" :speed="0">
                      <div class="list">
                        <div
                          @click="showuser(item)"
                          class="infoItem1"
                          v-for="(item, index) in infoList"
                          :key="index"
                        >
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.userFromPlate }}平台的{{
                              item.userFromName
                            }}与{{ item.userToPlate }}平台的{{
                              item.userToName
                            }}疑似{{ item.userToGroup }}
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
                <div class="infoModel">
                  <div class="infoTitle flex-container">
                    用户抗身份识别任务列表
                    <!-- 跳转终端页面 -->
                    <el-button
                      type="text"
                      @click="totaskManagement"
                      class="more"
                    >
                      更多
                    </el-button>
                  </div>
                  <div
                    class="infoContent"
                    :style="{ height: infoHeight + 'px' }"
                  >
                    <list-scroll class="box" :speed="0">
                      <div class="list">
                        <div
                          @click="showcompare(item)"
                          class="infoItem2"
                          v-for="(item, index) in infoList2"
                          :key="index"
                        >
                          <div class="_num">
                            {{ index + 1 }}
                          </div>
                          <div class="_cont">
                            {{ item.taskname }}, {{ item.tasktype }}任务 --
                            <span
                              v-for="dict in dict.type.taskmanagement_taskstate"
                              :key="dict.value"
                            >
                              <span v-if="item.taskstate == dict.value">
                                {{ dict.label }}
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </list-scroll>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
  
  <script>
import Header from "@/views/largeScreen/components/header/index.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import { listWarn, getWarnInfo } from "@/api/system/warn";
import {
  listAlignment,
  alignmentTaskDetail,
} from "@/api/combat/taskManagement";

import Graph from "./graph.vue";
import Cloud from "./cloud.vue";
import barchart from "../components/zhuxing.vue";

export default {
  components: { Header, Graph, Cloud, ListScroll, barchart },
  dicts: ["taskmanagement_taskstate"],
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      infoList: [],
      infoList2: [],

      infoHeight: 300,
      chart: null,
      scrollTop: 0,
      graphData: {
        nodes: [],
        edges: [],
      },
      graphDataBefore: {
        nodes: [],
        edges: [],
      },
      graphDataAfter: {
        nodes: [],
        edges: [],
      },
      cloudDataBefore: [],
      cloudDataAfter: [],
      tasktype: "",
      currentComponent: "Graph",
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 2;
    this.initDataFn(this.$route.query.id);
    listWarn({ pageNum: 1, pageSize: 10 }).then((res) => {
      if (res.code == 200) {
        this.infoList = res.rows;
      }
    });
    listAlignment({ pageNum: 1, pageSize: 10 }).then((res) => {
      if (res.code == 200) {
        this.infoList2 = res.rows;
      }
    });
  },
  methods: {
    initDataFn(id) {
      alignmentTaskDetail(id).then((backendData) => {
        this.tasktype = backendData.data.tasktype;
        // 抗识别前
        const users = new Map();
        // 提取边
        const edges = [];
        let edgeId = 0;
        users.set(id, {
          id: id + "",
          label: backendData.data.initData.name,
          type: "image",
          img: require("@/assets/xd/user1.png"),
          size: 100,
          fx: 800 * 0.85,
          fy: 800 * 0.25,
        });
        if (backendData.data.initData.weiboUserList.length) {
          edges.push({
            id: `edge-${edgeId++}`,
            source: id + "",
            target: backendData.data.initData.weiboUserList[0].source?.userId,
            label: backendData.data.initData.weiboUserList[0].source?.userPlate,
          });
        }
        if (backendData.data.initData.zhihuUserList.length) {
          edges.push({
            id: `edge-${edgeId++}`,
            source: id + "",
            target: backendData.data.initData.zhihuUserList[0].source?.userId,
            label: backendData.data.initData.zhihuUserList[0].source?.userPlate,
          });
        }
        backendData.data.initData.weiboUserList.forEach((item, index) => {
          if (item?.source?.userId) {
            // 添加source用户
            users.set(item.source.userId, {
              id: item.source.userId,
              label: item.source.userName || item.source.userNickname,
              data: item.source,
              type: "image",
              img: require("@/assets/xd/user3.png"),
              size: 70,
              fx: 800 * 0.6,
              fy: 800 * 0.25,
            });
          }
          // 半圆的半径
          let radius = 150;
          // 半圆的中心坐标
          let centerX = 800 * 0.6;
          let centerY = 800 * 0.25;
          let angle =
            Math.PI / 2 +
            (Math.PI * index) /
              (backendData.data.initData.weiboUserList.length - 1);
          let x = centerX + (radius * Math.sin(angle + Math.PI / 2) || -200);
          let y = centerY + (radius * Math.cos(angle + Math.PI / 2) || 0);
          // 添加target用户
          if (item?.target?.userId) {
            users.set(item.target.userId, {
              id: item.target.userId,
              label: item.target.userName || item.target.userNickname,
              data: item.target,
              type: "image",
              img: require("@/assets/xd/user5.png"),
              size: 60,
              fx: x,
              fy: y,
            });
          }
        });
        // 处理知乎用户
        backendData.data.initData.zhihuUserList.forEach((item, index) => {
          if (item?.source?.userId) {
            // 添加source用户
            users.set(item.source.userId, {
              id: item.source.userId,
              label: item.source.userName || item.source.userNickname,
              data: item.source,
              type: "image",
              img: require("@/assets/xd/user3.png"),
              size: 70,
              fx: 800 * 1.1,
              fy: 800 * 0.25,
            });
          }
          // 半圆的半径
          let radius = 150;
          // 半圆的中心坐标
          let centerX = 800 * 1.1;
          let centerY = 800 * 0.25;
          let angle =
            -Math.PI / 2 +
            (Math.PI * index) /
              (backendData.data.initData.zhihuUserList.length - 1);
          let x = centerX + (radius * Math.sin(angle + Math.PI / 2) || 200);
          let y = centerY + (radius * Math.cos(angle + Math.PI / 2) || 0);
          // 添加target用户
          if (item?.target?.userId) {
            users.set(item.target.userId, {
              id: item.target.userId,
              label: item.target.userName || item.target.userNickname,
              data: item.target,
              type: "image",
              img: require("@/assets/xd/user5.png"),
              size: 60,
              fx: x,
              fy: y,
            });
          }
        });
        // 转换为G6节点
        const nodes = Array.from(users.values());
        // 添加微博用户之间的边
        backendData.data.initData.weiboUserList.forEach((item) => {
          if (item?.source?.userId) {
            edges.push({
              id: `edge-${edgeId++}`,
              source: item.source.userId,
              target: item.target.userId,
              label: "微博关系",
            });
          }
        });
        // 添加知乎用户之间的边
        backendData.data.initData.zhihuUserList.forEach((item) => {
          if (item?.source?.userId) {
            edges.push({
              id: `edge-${edgeId++}`,
              source: item.source.userId,
              target: item.target.userId,
              label: "知乎关系",
            });
          }
        });
        // G6图谱的输入数据
        const g6Data = {
          nodes,
          edges,
        };
        this.graphDataBefore = g6Data;

        // 抗识别后
        const users1 = new Map();
        // 提取边
        const edges1 = [];
        let edgeId1 = 0;
        users1.set(id, {
          id: id + "",
          label: backendData.data.nowData.name,
          type: "image",
          img: require("@/assets/xd/user1.png"),
          size: 100,
          fx: 800 * 0.85,
          fy: 800 * 0.25,
        });
        if (backendData.data.nowData.weiboUserList.length) {
          edges1.push({
            id: `edge-${edgeId1++}`,
            source: id + "",
            target: backendData.data.nowData.weiboUserList[0].source?.userId,
            label: backendData.data.nowData.weiboUserList[0].source?.userPlate,
          });
        }
        if (backendData.data.nowData.zhihuUserList.length) {
          edges1.push({
            id: `edge-${edgeId1++}`,
            source: id + "",
            target: backendData.data.nowData.zhihuUserList[0].source?.userId,
            label: backendData.data.nowData.zhihuUserList[0].source?.userPlate,
          });
        }
        backendData.data.nowData.weiboUserList.forEach((item, index) => {
          if (item?.source?.userId) {
            // 添加source用户
            users1.set(item.source.userId, {
              id: item.source.userId,
              label: item.source.userName || item.source.userNickname,
              data: item.source,
              type: "image",
              img: require("@/assets/xd/user3.png"),
              size: 70,
              fx: 800 * 0.6,
              fy: 800 * 0.25,
            });
          }
          // 半圆的半径
          let radius = 150;
          // 半圆的中心坐标
          let centerX = 800 * 0.6;
          let centerY = 800 * 0.25;
          let angle =
            Math.PI / 2 +
            (Math.PI * index) /
              (backendData.data.nowData.weiboUserList.length - 1);
          let x = centerX + (radius * Math.sin(angle + Math.PI / 2) || -200);
          let y = centerY + (radius * Math.cos(angle + Math.PI / 2) || 0);
          // 添加target用户
          if (item?.target?.userId) {
            users1.set(item.target.userId, {
              id: item.target.userId,
              label: item.target.userName || item.target.userNickname,
              data: item.target,
              type: "image",
              img: require("@/assets/xd/user5.png"),
              size: 60,
              fx: x,
              fy: y,
            });
          }
        });
        // 处理知乎用户
        backendData.data.nowData.zhihuUserList.forEach((item, index) => {
          if (item?.source?.userId) {
            // 添加source用户
            users1.set(item.source.userId, {
              id: item.source.userId,
              label: item.source.userName || item.source.userNickname,
              data: item.source,
              type: "image",
              img: require("@/assets/xd/user3.png"),
              size: 70,
              fx: 800 * 1.1,
              fy: 800 * 0.25,
            });
          }
          // 半圆的半径
          let radius = 150;
          // 半圆的中心坐标
          let centerX = 800 * 1.1;
          let centerY = 800 * 0.25;
          let angle =
            -Math.PI / 2 +
            (Math.PI * index) /
              (backendData.data.nowData.zhihuUserList.length - 1);
          let x = centerX + (radius * Math.sin(angle + Math.PI / 2) || 200);
          let y = centerY + (radius * Math.cos(angle + Math.PI / 2) || 0);
          // 添加target用户
          if (item?.target?.userId) {
            users1.set(item.target.userId, {
              id: item.target.userId,
              label: item.target.userName || item.target.userNickname,
              data: item.target,
              type: "image",
              img: require("@/assets/xd/user5.png"),
              size: 60,
              fx: x,
              fy: y,
            });
          }
        });
        // 转换为G6节点
        const nodes1 = Array.from(users1.values());
        // 添加微博用户之间的边
        backendData.data.nowData.weiboUserList.forEach((item) => {
          if (item?.source?.userId) {
            edges1.push({
              id: `edge-${edgeId++}`,
              source: item.source.userId,
              target: item.target.userId,
              label: "微博关系",
            });
          }
        });
        // 添加知乎用户之间的边
        backendData.data.nowData.zhihuUserList.forEach((item) => {
          if (item?.source?.userId) {
            edges1.push({
              id: `edge-${edgeId++}`,
              source: item.source.userId,
              target: item.target.userId,
              label: "知乎关系",
            });
          }
        });
        // G6图谱的输入数据
        const g6Data1 = {
          nodes: nodes1,
          edges: edges1,
        };
        this.graphDataAfter = g6Data1;
      });
    },
    showuser(row) {
      this.$router.push("/userIdentityScreen?id=" + row.id);
    },
    showcompare(row) {
      this.initDataFn(row.id);
    },
    showantiLocalization() {
      this.$router.push("/networkUser/antiLocalization");
    },
    showantiAttributive() {
      this.$router.push("/networkUser/antiAttributive");
    },
    toalarmInformation() {
      this.$router.push("/IdentityProtection/informationManagement");
    },
    totaskManagement() {
      this.$router.push("/IdentityProtection/taskManagement");
    },
    todataStatistics() {
      this.$router.push("/IdentityProtection/dataStatistics");
    },
    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 5;
      this.leftModelSpan = 19;
    },
    touser_management() {
      this.$router.push("/networkUser/user");
    },
  },
};
</script>
  <style lang="scss" scoped>
.home-model-right {
  border-radius: 5px;
  padding: 5px;
  padding-top: 15px;
}

.home-model-left {
  position: relative;
  height: calc(100vh - 70px);
}

.home-model {
  width: 100%;
  height: 100%;

  .infoTitle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-image: url(~@/assets/xd/new/title.png);
    background-size: 100% 80%;
    background-repeat: no-repeat;
    color: #fff;
  }
}

.Tc2 {
  position: relative;
  left: 20px;
  top: 20px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.infoTable {
  font-size: 19px;
}

.rightJ {
  z-index: 1000;
}

// 微博知乎文字
.wb {
  font-size: 40px;
  color: #ffb302;
  position: absolute;
  top: 10%;
  left: 30%;

  text-align: center;
  z-index: 1;
}

.zh {
  font-size: 40px;
  color: #2aed07;
  position: absolute;
  top: 10%;
  left: 55%;
  text-align: center;
  z-index: 1;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
</style>
  